<template>
	<view>
		<u-toast ref="uToast" />
		<view class="make-question">
			<view class="box">
				<view class="selection">
					撰写标题
				</view>
				<u-input v-model="title" placeholder="请输入问题标题" type="text" :border="true" />
				<view class="selection">
					撰写问题
				</view>
				<vk-data-input-editor ref="vk_editor" v-model="content" placeholder="请输入问题内容"></vk-data-input-editor>

				<view class="selection">
					选择分类
				</view>
				<u-input v-model="value.label" type="select" :border="true" @click="show = true" />
				<u-select v-model="show" :list="categories" @confirm="actionSheetCallback" value-name="_id"
					label-name='name'></u-select>
			</view>

			<view class="button-box">
				<u-button type="primary" :custom-style="btnCustomStyle" @click="submit">发布问答</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				btnCustomStyle: {
					width: "710rpx",
					height: "80rpx",
					background: "#1663ff",
					borderRadius: "8rpx",
					letterSpacing: "2rpx"
				},
				title: "",
				content: "",
				value: {
					label: ""
				},
				show: false,
				categories: [],
			};
		},
		onLoad() {
			that = this
			this.getCategories()
		},
		methods: {
			submit() {
				if (this.title.length < 2) {
					uni.showToast({
						icon: "none",
						title: "标题长度太短啦~"
					})
					return
				}

				if (this.content.length < 10) {
					uni.showToast({
						icon: "none",
						title: "内容长度太短啦~"
					})
					return
				}
				if (!this.value.value) {
					uni.showToast({
						icon: "none",
						title: "请选择分类"
					})
					return
				}
				uni.showModal({
					title: "提示",
					content: "确认提交？",
					success(res) {
						if (res.confirm) {
							uni.vk.callFunction({
								url: 'client/bbs/kh/add',
								data: {
									title: that.title,
									content: that.content,
									category_id: that.value.value
								},
								success(data) {
									that.content = ""
									that.title = ""
									that.$refs.vk_editor.clear()
									that.$refs.uToast.show({
										title: '提交成功',
										back: true
									})
								},
								fail(e) {
									uni.vk.alert(e.msg)
								}
							});
						}
					}
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(e) {
				this.value = e[0]
				console.log(e)
			},
			getCategories() {
				uni.vk.callFunction({
					url: 'client/bbs/pub/categories',
					success(data) {
						let categories = [];
						categories.push(...data.rows);
						console.log(categories)
						that.categories.push(...categories);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.make-question {
		padding: 20rpx;

		.box {
			background: #FFFFFF;

			.selection {
				font-weight: bold;
				color: #333333;
				font-size: 38rpx;
				padding: 20rpx;
			}
		}

		.button-box {
			margin-top: 40rpx;
		}

	}
</style>
